<template>
  <div>
    <div class="chatRow chatRowMe" v-if="message.tag===0" style="padding-bottom: 50px">
      <div class="chatContent" >{{message.content}}</div>
      <el-avatar icon="el-icon-user-solid" style="margin-left: 5px" :size="50"></el-avatar>
    </div>

    <div class="chatRow" v-if="message.tag===1" style="padding-bottom: 50px;padding-right: 400px">
      <el-avatar class="chatAvatar"  fit="fill" :size="50" src="https://img0.baidu.com/it/u=2044560625,835094655&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300"></el-avatar>
      <div class="chatMsgContent" style="padding-right: 50px">
        <div class="chatUsername">智能AI心理咨询师</div>
        <div class="chatContent">{{message.content}}</div>
      </div>
  </div>
  </div>

</template>
<script>

export default {
  name:"MessageView",
  props:{
    message:{
      content:{

      },
      tag:{

      }
    }
  },
  method:{
  },
  created() {
  },
  updated() {
    this.$nextTick(() => {
      this.$emit("change")
    })
  },
}
</script>
<style lang="scss">
.chatRow {
  display: flex;
  align-items: flex-start;
  margin: 5px 0;
}

.chatAvatar {
  margin-right: 5px;
  flex-shrink: 0;
}

.chatUsername {
  font-size: 12px;
  white-space: nowrap;
  color: white;
  margin-bottom: 2px;
}

.chatContent {
  border-radius: 14px 14px 14px 0;
  padding: 10px;
  background-color: ghostwhite;
  font-size: 16px;
  line-height: 25px;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

.chatRowMe {
  justify-content: flex-end;
}

.chatRowMe .chatContent {
  border-radius: 10px 10px 0 10px;
  //background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
}
</style>
